<template>
  <div class="admin-container">
    <!-- 顶部导航栏 -->
    <header class="admin-header">
      <div class="header-content">
        <div class="logo-section">
          <img src="https://py-steven.com/blog/static/image/logo.png" alt="logo" class="logo" />
          <span class="site-title">后台管理</span>
        </div>
        <nav class="nav-menu">
          <router-link to="/home" class="nav-item">返回首页</router-link>
          <a href="#" class="nav-item" @click.prevent="handleLogout">退出登录</a>
        </nav>
      </div>
    </header>

    <!-- 主内容区 -->
    <div class="admin-main">
      <!-- 侧边栏 -->
      <aside class="admin-sidebar">
        <div class="menu-section">
          <div class="menu-title">内容管理</div>
          <ul class="menu-list">
            <li
              class="menu-item"
              :class="{ active: activeMenu === 'articles' }"
              @click="activeMenu = 'articles'"
            >
              📝 文章管理
            </li>
            <li
              class="menu-item"
              :class="{ active: activeMenu === 'categories' }"
              @click="activeMenu = 'categories'"
            >
              🏷️ 分类管理
            </li>
          </ul>
        </div>

        <div class="menu-section">
          <div class="menu-title">系统管理</div>
          <ul class="menu-list">
            <li
              class="menu-item"
              :class="{ active: activeMenu === 'users' }"
              @click="activeMenu = 'users'"
            >
              👥 用户管理
            </li>
            <li
              class="menu-item"
              :class="{ active: activeMenu === 'settings' }"
              @click="activeMenu = 'settings'"
            >
              ⚙️ 系统设置
            </li>
          </ul>
        </div>
      </aside>

      <!-- 内容区 -->
      <main class="admin-content">
        <!-- 文章管理 -->
        <div v-if="activeMenu === 'articles'" class="content-section">
          <div class="section-header">
            <h2>文章管理</h2>
            <router-link to="/post/create" class="btn-primary">新建文章</router-link>
          </div>
          <div class="content-body">
            <!-- 加载状态 -->
            <div v-if="articlesLoading" class="loading-state">
              <p>加载中...</p>
            </div>
            <!-- 空状态 -->
            <div v-else-if="articles.length === 0" class="empty-state">
              <p>暂无文章，快去发布第一篇文章吧！</p>
            </div>
            <!-- 文章列表 -->
            <div v-else class="table-wrapper">
              <table class="data-table">
                <thead>
                  <tr>
                    <th>标题</th>
                    <th>分类</th>
                    <th>标签</th>
                    <th>状态</th>
                    <th>浏览量</th>
                    <th>发布时间</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="article in articles" :key="article.id">
                    <td class="article-title">
                      {{ article.title }}
                      <span v-if="article.is_top === 1" class="badge badge-top">置顶</span>
                    </td>
                    <td>{{ getCategoryName(article.category_id) }}</td>
                    <td>
                      <div class="tags-wrapper">
                        <span v-for="tag in article.tags" :key="tag" class="tag">{{ tag }}</span>
                      </div>
                    </td>
                    <td>
                      <span class="badge" :class="getStatusClass(article.status)">
                        {{ getStatusLabel(article.status) }}
                      </span>
                    </td>
                    <td>{{ article.view_count }}</td>
                    <td>{{ formatDate(article.published_at) }}</td>
                    <td>
                      <div class="action-buttons">
                        <button class="btn-link" @click="viewArticle(article.id)">查看</button>
                        <button class="btn-link" @click="editArticle(article.id)">编辑</button>
                        <button class="btn-link" @click="toggleArticleTop(article)">
                          {{ article.is_top === 1 ? '取消置顶' : '置顶' }}
                        </button>
                        <button class="btn-link danger" @click="confirmDeleteArticle(article.id)">删除</button>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <!-- 分页 -->
            <div v-if="articles.length > 0" class="pagination">
              <button
                class="pagination-btn"
                :disabled="articlesPagination.page === 1"
                @click="loadArticles(articlesPagination.page - 1)"
              >
                上一页
              </button>
              <span class="pagination-info">
                第 {{ articlesPagination.page }} / {{ articlesPagination.total_pages }} 页
              </span>
              <button
                class="pagination-btn"
                :disabled="articlesPagination.page >= articlesPagination.total_pages"
                @click="loadArticles(articlesPagination.page + 1)"
              >
                下一页
              </button>
            </div>
          </div>
        </div>

        <!-- 分类管理 -->
        <div v-if="activeMenu === 'categories'" class="content-section">
          <div class="section-header">
            <h2>分类管理</h2>
            <button class="btn-primary" @click="showCategoryDialog()">新建分类</button>
          </div>
          <div class="content-body">
            <!-- 加载状态 -->
            <div v-if="categoriesLoading" class="loading-state">
              <p>加载中...</p>
            </div>
            <!-- 空状态 -->
            <div v-else-if="categories.length === 0" class="empty-state">
              <p>暂无分类</p>
            </div>
            <!-- 分类列表 -->
            <div v-else class="table-wrapper">
              <table class="data-table">
                <thead>
                  <tr>
                    <th>ID</th>
                    <th>分类名称</th>
                    <th>描述</th>
                    <th>父分类</th>
                    <th>排序</th>
                    <th>状态</th>
                    <th>创建时间</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="category in categories" :key="category.id">
                    <td>{{ category.id }}</td>
                    <td>{{ category.name }}</td>
                    <td class="category-desc">{{ category.description || '-' }}</td>
                    <td>{{ getParentCategoryName(category.parent_id) }}</td>
                    <td>{{ category.sort_order }}</td>
                    <td>
                      <span class="badge" :class="category.status === 1 ? 'badge-success' : 'badge-disabled'">
                        {{ category.status === 1 ? '启用' : '禁用' }}
                      </span>
                    </td>
                    <td>{{ formatDate(category.created_at) }}</td>
                    <td>
                      <div class="action-buttons">
                        <button class="btn-link" @click="showCategoryDialog(category)">编辑</button>
                        <button class="btn-link" @click="toggleCategoryStatus(category)">
                          {{ category.status === 1 ? '禁用' : '启用' }}
                        </button>
                        <button class="btn-link danger" @click="confirmDeleteCategory(category.id)">删除</button>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <!-- 用户管理 -->
        <div v-if="activeMenu === 'users'" class="content-section">
          <div class="section-header">
            <h2>用户管理</h2>
          </div>
          <div class="content-body">
            <p class="placeholder">用户管理功能开发中...</p>
          </div>
        </div>

        <!-- 系统设置 -->
        <div v-if="activeMenu === 'settings'" class="content-section">
          <div class="section-header">
            <h2>系统设置</h2>
          </div>
          <div class="content-body">
            <p class="placeholder">系统设置功能开发中...</p>
          </div>
        </div>
      </main>
    </div>

    <!-- 分类编辑对话框 -->
    <div v-if="categoryDialogVisible" class="dialog-overlay" @click="closeCategoryDialog">
      <div class="dialog-content" @click.stop>
        <div class="dialog-header">
          <h3>{{ categoryForm.id ? '编辑分类' : '新建分类' }}</h3>
          <button class="dialog-close" @click="closeCategoryDialog">✕</button>
        </div>
        <div class="dialog-body">
          <div class="form-group">
            <label>分类名称 <span class="required">*</span></label>
            <input
              v-model="categoryForm.name"
              type="text"
              class="form-input"
              placeholder="请输入分类名称"
              maxlength="100"
            />
          </div>
          <div class="form-group">
            <label>分类描述</label>
            <textarea
              v-model="categoryForm.description"
              class="form-textarea"
              placeholder="请输入分类描述"
              rows="3"
            ></textarea>
          </div>
          <div class="form-group">
            <label>父分类</label>
            <select v-model="categoryForm.parent_id" class="form-select">
              <option :value="null">无（顶级分类）</option>
              <option
                v-for="cat in availableParentCategories"
                :key="cat.id"
                :value="cat.id"
              >
                {{ cat.name }}
              </option>
            </select>
          </div>
          <div class="form-group">
            <label>排序顺序</label>
            <input
              v-model.number="categoryForm.sort_order"
              type="number"
              class="form-input"
              placeholder="数字越小越靠前，默认0"
              min="0"
            />
          </div>
        </div>
        <div class="dialog-footer">
          <button class="btn-secondary" @click="closeCategoryDialog">取消</button>
          <button class="btn-primary" @click="saveCategoryForm">保存</button>
        </div>
      </div>
    </div>

    <!-- 确认对话框 -->
    <ConfirmDialog
      v-model:visible="confirmDialog.visible"
      :title="confirmDialog.title"
      :message="confirmDialog.message"
      :type="confirmDialog.type"
      @confirm="confirmDialog.onConfirm"
      @cancel="confirmDialog.onCancel"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, watch, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/store/auth'
import { logout } from '@/api/auth'
import { getArticles, getCategories, updateArticle, deleteArticle } from '@/api/article'
import { createCategory, updateCategory, deleteCategory } from '@/api/category'
import message from '@/utils/message'
import ConfirmDialog from '@/components/ConfirmDialog.vue'

const router = useRouter()
const authStore = useAuthStore()

// 当前激活的菜单
const activeMenu = ref('articles')

// 文章管理数据
const articles = ref([])
const articlesLoading = ref(false)
const articlesPagination = ref({
  page: 1,
  page_size: 10,
  total: 0,
  total_pages: 0
})

// 分类管理数据
const categories = ref([])
const categoriesLoading = ref(false)

// 分类对话框
const categoryDialogVisible = ref(false)
const categoryForm = ref({
  id: null,
  name: '',
  description: '',
  parent_id: null,
  sort_order: 0
})

// 确认对话框
const confirmDialog = ref({
  visible: false,
  title: '提示',
  message: '',
  type: 'warning',
  onConfirm: () => {},
  onCancel: () => {}
})

// 可选的父分类列表（排除当前编辑的分类及其子分类）
const availableParentCategories = computed(() => {
  if (!categoryForm.value.id) {
    // 新建分类时，所有分类都可以作为父分类
    return categories.value.filter(c => c.status === 1)
  }
  // 编辑分类时，排除自己
  return categories.value.filter(c => c.id !== categoryForm.value.id && c.status === 1)
})

// 加载文章列表
const loadArticles = async (page = 1) => {
  try {
    articlesLoading.value = true
    const response = await getArticles({
      page,
      page_size: articlesPagination.value.page_size,
      author_id: authStore.user?.id // 只获取当前用户的文章
    })

    if (response.code === 200) {
      articles.value = response.data.articles
      articlesPagination.value = {
        page: response.data.page,
        page_size: response.data.page_size,
        total: response.data.total,
        total_pages: response.data.total_pages
      }
    }
  } catch (error) {
    console.error('获取文章列表失败:', error)
    message.error(error.message || '获取文章列表失败')
  } finally {
    articlesLoading.value = false
  }
}

// 加载分类列表
const loadCategories = async () => {
  try {
    categoriesLoading.value = true
    const response = await getCategories()

    if (response.code === 200) {
      categories.value = response.data
    }
  } catch (error) {
    console.error('获取分类列表失败:', error)
    message.error(error.message || '获取分类列表失败')
  } finally {
    categoriesLoading.value = false
  }
}

// 获取分类名称
const getCategoryName = (categoryId) => {
  const category = categories.value.find(c => c.id === categoryId)
  return category ? category.name : '未分类'
}

// 获取父分类名称
const getParentCategoryName = (parentId) => {
  if (!parentId) return '-'
  const category = categories.value.find(c => c.id === parentId)
  return category ? category.name : '-'
}

// 获取文章状态标签
const getStatusLabel = (status) => {
  const statusMap = {
    0: '草稿',
    1: '已发布',
    2: '已下线'
  }
  return statusMap[status] || '未知'
}

// 获取文章状态样式类
const getStatusClass = (status) => {
  const classMap = {
    0: 'badge-draft',
    1: 'badge-success',
    2: 'badge-offline'
  }
  return classMap[status] || ''
}

// 格式化日期
const formatDate = (dateStr) => {
  if (!dateStr) return '-'
  const date = new Date(dateStr)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 查看文章
const viewArticle = (articleId) => {
  router.push(`/article/${articleId}`)
}

// 编辑文章
const editArticle = (articleId) => {
  router.push(`/post/create?id=${articleId}`)
}

// 切换文章置顶状态
const toggleArticleTop = async (article) => {
  try {
    const newTopStatus = article.is_top === 1 ? 0 : 1
    const response = await updateArticle(article.id, {
      is_top: newTopStatus
    })

    if (response.code === 200) {
      message.success(newTopStatus === 1 ? '文章已置顶' : '已取消置顶')
      // 更新本地数据
      article.is_top = newTopStatus
    }
  } catch (error) {
    console.error('切换置顶状态失败:', error)
    message.error(error.message || '操作失败')
  }
}

// 确认删除文章
const confirmDeleteArticle = (articleId) => {
  confirmDialog.value = {
    visible: true,
    title: '删除文章',
    message: '确定要删除这篇文章吗？删除后文章将被下线，但数据会保留。',
    type: 'danger',
    onConfirm: () => handleDeleteArticle(articleId),
    onCancel: () => {}
  }
}

// 删除文章
const handleDeleteArticle = async (articleId) => {
  try {
    const response = await deleteArticle(articleId, false) // 软删除

    if (response.code === 200) {
      message.success('文章已删除')
      // 重新加载文章列表
      loadArticles(articlesPagination.value.page)
    }
  } catch (error) {
    console.error('删除文章失败:', error)
    message.error(error.message || '删除失败')
  }
}

// 显示分类对话框
const showCategoryDialog = (category = null) => {
  if (category) {
    // 编辑分类
    categoryForm.value = {
      id: category.id,
      name: category.name,
      description: category.description || '',
      parent_id: category.parent_id,
      sort_order: category.sort_order
    }
  } else {
    // 新建分类
    categoryForm.value = {
      id: null,
      name: '',
      description: '',
      parent_id: null,
      sort_order: 0
    }
  }
  categoryDialogVisible.value = true
}

// 关闭分类对话框
const closeCategoryDialog = () => {
  categoryDialogVisible.value = false
  categoryForm.value = {
    id: null,
    name: '',
    description: '',
    parent_id: null,
    sort_order: 0
  }
}

// 保存分类表单
const saveCategoryForm = async () => {
  // 验证表单
  if (!categoryForm.value.name.trim()) {
    message.error('请输入分类名称')
    return
  }

  try {
    if (categoryForm.value.id) {
      // 更新分类
      const response = await updateCategory(categoryForm.value.id, {
        name: categoryForm.value.name,
        description: categoryForm.value.description,
        parent_id: categoryForm.value.parent_id,
        sort_order: categoryForm.value.sort_order
      })

      if (response.code === 200) {
        message.success('分类更新成功')
        closeCategoryDialog()
        loadCategories()
      }
    } else {
      // 创建分类
      const response = await createCategory({
        name: categoryForm.value.name,
        description: categoryForm.value.description,
        parent_id: categoryForm.value.parent_id,
        sort_order: categoryForm.value.sort_order
      })

      if (response.code === 200) {
        message.success('分类创建成功')
        closeCategoryDialog()
        loadCategories()
      }
    }
  } catch (error) {
    console.error('保存分类失败:', error)
    message.error(error.message || '保存失败')
  }
}

// 切换分类状态
const toggleCategoryStatus = async (category) => {
  try {
    const newStatus = category.status === 1 ? 0 : 1
    const response = await updateCategory(category.id, {
      status: newStatus
    })

    if (response.code === 200) {
      message.success(newStatus === 1 ? '分类已启用' : '分类已禁用')
      // 重新加载分类列表
      loadCategories()
    }
  } catch (error) {
    console.error('切换分类状态失败:', error)
    message.error(error.message || '操作失败')
  }
}

// 确认删除分类
const confirmDeleteCategory = (categoryId) => {
  confirmDialog.value = {
    visible: true,
    title: '删除分类',
    message: '确定要删除这个分类吗？如果有文章使用此分类，将无法删除。',
    type: 'danger',
    onConfirm: () => handleDeleteCategory(categoryId),
    onCancel: () => {}
  }
}

// 删除分类
const handleDeleteCategory = async (categoryId) => {
  try {
    const response = await deleteCategory(categoryId, false) // 软删除

    if (response.code === 200) {
      message.success('分类已删除')
      // 重新加载分类列表
      loadCategories()
    }
  } catch (error) {
    console.error('删除分类失败:', error)
    message.error(error.message || '删除失败')
  }
}

// 退出登录
const handleLogout = async () => {
  try {
    await logout()
    authStore.logout()
    message.success('退出登录成功')
    router.push('/login')
  } catch (error) {
    message.error(error.message || '退出登录失败')
  }
}

// 监听菜单切换
watch(activeMenu, (newMenu) => {
  if (newMenu === 'articles' && articles.value.length === 0) {
    loadArticles()
  } else if (newMenu === 'categories' && categories.value.length === 0) {
    loadCategories()
  }
})

// 组件挂载时加载数据
onMounted(() => {
  loadArticles()
  loadCategories() // 提前加载分类数据，用于显示文章的分类名称
})
</script>

<style scoped>
.admin-container {
  min-height: 100vh;
  background-color: #f5f7fa;
}

/* 顶部导航栏 */
.admin-header {
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}

.logo-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.site-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.nav-menu {
  display: flex;
  gap: 30px;
  align-items: center;
}

.nav-item {
  color: #333;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.3s;
}

.nav-item:hover {
  color: #1890ff;
}

/* 主内容区 */
.admin-main {
  max-width: 1600px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  gap: 20px;
  min-height: calc(100vh - 100px);
}

/* 侧边栏 */
.admin-sidebar {
  width: 240px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 20px 0;
  height: fit-content;
  position: sticky;
  top: 80px;
}

.menu-section {
  margin-bottom: 30px;
}

.menu-section:last-child {
  margin-bottom: 0;
}

.menu-title {
  padding: 0 20px 12px;
  font-size: 12px;
  color: #999;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-item {
  padding: 12px 20px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.menu-item:hover {
  background: #f5f5f5;
}

.menu-item.active {
  background: #e6f7ff;
  color: #1890ff;
  border-right: 3px solid #1890ff;
  font-weight: 500;
}

/* 内容区 */
.admin-content {
  flex: 1;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 30px;
  min-height: 600px;
}

.content-section {
  height: 100%;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f0f0f0;
}

.section-header h2 {
  font-size: 24px;
  color: #333;
  margin: 0;
  font-weight: 600;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.content-body {
  padding: 20px 0;
}

.placeholder {
  text-align: center;
  color: #999;
  font-size: 14px;
  padding: 60px 20px;
}

/* 表格样式 */
.table-wrapper {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table thead {
  background: #fafafa;
}

.data-table th,
.data-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

.data-table th {
  font-weight: 600;
  color: #333;
}

.data-table td {
  color: #666;
}

.data-table tbody tr:hover {
  background: #fafafa;
}

.article-title {
  font-weight: 500;
  color: #333;
  max-width: 300px;
}

.category-desc {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 标签样式 */
.tags-wrapper {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tag {
  display: inline-block;
  padding: 2px 8px;
  background: #f0f0f0;
  color: #666;
  border-radius: 4px;
  font-size: 12px;
}

/* 徽章样式 */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.badge-success {
  background: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.badge-draft {
  background: #f5f5f5;
  color: #999;
  border: 1px solid #d9d9d9;
}

.badge-offline {
  background: #fff1f0;
  color: #ff4d4f;
  border: 1px solid #ffccc7;
}

.badge-disabled {
  background: #f5f5f5;
  color: #999;
  border: 1px solid #d9d9d9;
}

.badge-top {
  background: #fff7e6;
  color: #fa8c16;
  border: 1px solid #ffd591;
  margin-left: 8px;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  gap: 8px;
}

.btn-link {
  background: none;
  border: none;
  color: #1890ff;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 8px;
  transition: color 0.2s;
}

.btn-link:hover {
  color: #40a9ff;
}

.btn-link.danger {
  color: #ff4d4f;
}

.btn-link.danger:hover {
  color: #ff7875;
}

/* 分页样式 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #f0f0f0;
}

.pagination-btn {
  background: white;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 6px 16px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  transition: all 0.2s;
}

.pagination-btn:hover:not(:disabled) {
  color: #1890ff;
  border-color: #1890ff;
}

.pagination-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.pagination-info {
  font-size: 14px;
  color: #666;
}

/* 加载和空状态 */
.loading-state,
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #999;
  font-size: 14px;
}

/* 对话框样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.dialog-content {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dialog-header {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dialog-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.dialog-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.dialog-close:hover {
  color: #333;
}

.dialog-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.dialog-footer {
  padding: 16px 20px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-group label {
  display: block;
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
  font-weight: 500;
}

.required {
  color: #ff4d4f;
  margin-left: 4px;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: #1890ff;
}

.form-textarea {
  resize: vertical;
  font-family: inherit;
}

.btn-secondary {
  background: white;
  border: 1px solid #d9d9d9;
  color: #333;
  border-radius: 6px;
  padding: 8px 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-secondary:hover {
  color: #1890ff;
  border-color: #1890ff;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .admin-main {
    flex-direction: column;
  }

  .admin-sidebar {
    width: 100%;
    position: static;
  }

  .section-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}
</style>
